<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>导航栏</title>
</head>
<body>
    <!-- navbar:用于创建一个导航栏  -->
    <!-- navbar-expand-md可以让导航栏在指定断点产生相应，形成一个垂直导航栏 -->
    <!-- navbar-dark控制文本颜色，匹配黑色背景 -->
    <!-- bg-dark设置导航栏背景颜色为黑色 -->
    <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <!-- 在导航栏显示标题元素，或者公司logo，可以用img显示图片 -->
        <a href="#" class="navbar-brand">NIIT</a>
        <!-- class="navbar-toggler"可以让导航栏在指定断点折叠成一个按钮 -->
        <!--  data-toggle="collapse"的作用是控制折叠导航栏的显示和隐藏，当用户点击按钮会展开显示导航项目 -->
        <!-- data-target="#navbarCollapse"指定匹配的折叠导航栏的展开或折叠操作 -->
        <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
            <!-- 三条横杠的图标 -->
            <span class="navbar-toggler-icon"></span>
        </button>
        <!-- 折叠导航条 -->
        <div class="collapse navbar-collapse" id="navbarCollapse">
            <div class="navbar-nav">
                <a href="#" class="nav-item nav-link active">首页</a>
                <a href="#" class="nav-item nav-link">关于我们</a>
                <a href="#" class="nav-item nav-link">联系方式</a>
            </div>
        </div>
        <!-- ml-auto可以让元素水平对齐到最右边 -->
        <div class="navbar-nav ml-auto">
          <a href="#" class="nav-item nav-link">登录</a>
      </div>
    </nav>
    
</body>
</html>